<template>
  <jke-modal
    :visible.sync="jkeForm.visible"
    :width="1200"
    :title="jkeForm.title"
    :fullscreen.sync="jkeForm.fullscreen"
    :switchFullscreen="jkeForm.switchFullscreen"
  >
    <!--  -->
    <crumbs @goBack="goBack" :superiorMenu="['销售管理', '销售合同']" currentMenu="添加收款"></crumbs>
    <div class="form-body">
      <a-card title="基础信息" :bordered="false" style="margin-top: 12px">
        <a-form :form="form" @submit="handleSubmit" layout="vertical">
          <a-form-item label="收款金额">
            <a-input
              @input="(e) => inputPrice(e)"
              v-decorator="['paybackAmount', { rules: [{ required: true, message: '请输入收款金额' }] }]"
              placeholder="请输入收款金额"
            />
            <span style="position: absolute; left: 80px; top: -34.5px; color: #888888">{{ amountUnitText }}</span>
          </a-form-item>
          <a-form-item label="收款账户">
            <a-input v-decorator="['paybackAccount']" placeholder="请输入收款账户" />
          </a-form-item>
          <div class="a-form-item" />
        </a-form>
        <a-form :form="form" @submit="handleSubmit" layout="vertical">
          <a-form-item label="收款时间">
            <a-date-picker v-decorator="['paybackDate']" style="width: 100%" />
          </a-form-item>
          <a-form-item label="收款人" prop="paybackUserCode">
            <j-select-user-by-dep
              :value="paybackUser"
              v-decorator="['paybackUserCode']"
              @changeRow="userFilter"
              :seldep="true"
              :modalWidth="1000"
              :multi="false"
            ></j-select-user-by-dep>
          </a-form-item>
          <div class="a-form-item" />
        </a-form>
        <a-form :form="form" @submit="handleSubmit" layout="vertical">
          <a-form-item label="登记人" prop="registerCode">
            <j-select-user-by-dep
              :v-model="register"
              v-decorator="['registerCode']"
              @changeRow="registerFilter"
              :seldep="true"
              :modalWidth="1000"
              :multi="false"
            ></j-select-user-by-dep>
          </a-form-item>
        </a-form>
        <a-form layout="vertical">
          <a-form-item label="收款凭证" style="flex: 1">
            <file-upload :ids="attachment" fileType="image" @getFileList="getFileList"></file-upload>
            <p style="line-height: 30px;color:#8d8d8d;">最多上传5个文件，每个大小不可超过20M</p>
          </a-form-item>
        </a-form>
      </a-card>
    </div>

    <div class="footer-submit form-footer">
      <a-button type="primary" :loading="loadingSubmit" class="submitBtn" @click="handleSubmit"> 提交 </a-button>
    </div>
  </jke-modal>
</template>
<script>
import crumbs from '@/components/crumbs.vue'
import FileUpload from '@/components/fileActions/FileUpload.vue'
import { checkPrice, amountUnit } from '@/utils/util'
import { API } from '@/api/requestFzs'

import moment from 'dayjs'
export default {
  data() {
    return {
      jkeForm: {
        title: '添加收款',
        visible: false,
        fullscreen: true,
        switchFullscreen: true,
      },
      loadingSubmit: false, //防止多次提交
      form: this.$form.createForm(this, { name: 'coordinated' }),
      paybackUserId: '',
      paybackUser: '',
      registerId: '',
      register: '',
      attachment: '',
      amountUnitText: '',
      saleContractId: '',
      pendingCollectionAmount: 0,
    }
  },
  components: {
    FileUpload,
    crumbs,
  },
  methods: {
    /* 获取所属合同信息 */
    initForm(v) {
      this.jkeForm.visible = true
      let dealInfo = JSON.parse(v.dealInfo)
      this.saleContractId = dealInfo.contractId
      this.pendingCollectionAmount = dealInfo.pendingCollectionAmount
      this.$nextTick(() => {
        let userInfo = JSON.parse(localStorage.getItem('pro__Login_Userinfo'))
        this.registerFilter(userInfo.value.username, [{ id: userInfo.value.id }])
      })
    },
    /* 面包屑返回 */
    goBack() {
      this.jkeForm.visible = false
    },
    // 金额格式化
    inputPrice(e) {
      let num = checkPrice(e.target.value)
      if (num > this.pendingCollectionAmount) {
        this.$antdMessage.warning(`收款金额不能大于合同待收款金额(${this.pendingCollectionAmount})`)
        num = this.pendingCollectionAmount
      }
      this.form.setFieldsValue({
        paybackAmount: num,
      })
      this.amountUnitText = amountUnit(num)
    },
    /* 获取附件 */
    getFileList(v) {
      this.attachment = v
    },
    /* 选定收款人 */
    userFilter(v, row) {
      if (row.length > 0) {
        this.paybackUser = v
        this.paybackUserId = row[0].id
        this.form.setFieldsValue({
          paybackUserCode: v,
        })
      } else {
        this.paybackUser = ''
        this.paybackUserId = ''
        this.form.setFieldsValue({
          paybackUserCode: '',
        })
      }
    },
    /* 选定登记人 */
    registerFilter(v, row) {
      console.log('v,row:', v, row[0].id)
      if (row.length > 0) {
        this.register = v
        this.registerId = row[0].id
        this.form.setFieldsValue({
          registerCode: v,
        })
      } else {
        this.register = ''
        this.registerId = ''
        this.form.setFieldsValue({
          registerCode: '',
        })
      }
    },
    handleSubmit() {
      this.form.validateFields((err, values) => {
        if (!err) {
          let parameters = values
          if (parameters.paybackDate) {
            parameters.paybackDate = moment(parameters.paybackDate).format('YYYY-MM-DD')
          }
          parameters.paybackUserId = this.paybackUserId
          parameters.registerId = this.registerId
          parameters.attachment = this.attachment
          parameters.saleContractId = this.saleContractId
          this.loadingSubmit = true
          API.saleContractPaybackAdd(parameters).then((res) => {
            if (res.code == 200) {
              this.$antdMessage.success('添加收款成功')
              this.$emit('refresh')
              this.goBack()
              this.loadingSubmit = false
            } else {
              this.$antdMessage.error(res.message)
              this.loadingSubmit = false
            }
          })
        }
      })
    },
  },
}
</script>
<style scoped lang="less">
@import '~@/assets/less/public.less';
.flex(@jc,@ai,@fd:row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}
/deep/.ant-form-vertical {
  display: flex;
  justify-content: space-between;
  .ant-form-item {
    width: 30%;
  }
}
.form-body {
  height: calc(100vh - 178px);
  overflow-y: scroll;
}
.form-footer {
  margin: 12px -12px 0 -12px;
}
.submitBtn {
  .flex(flex-end, center);
  padding: 8px;
}
.code-btn {
  position: absolute;
  right: 0;
  top: -34.5px;
}
</style>
